<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<!--  @transition="transition" @animationfinish="animationfinish" -->
			<swiper class="swiper-box" :current="swiperCurrent"  @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(itemOne, indexOne) in list" :key="indexOne">
					<scroll-view :refresher-enabled="true" :refresher-triggered="triggered"  @refresherrefresh="refresherrefresh" 
					scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="order" v-for="(res, index1) in dataList" :key="res.id" @click="jumpListDetails(res)">
								<view class="top">
									<view class="left">
										<u-icon name="car" :size="30" color="rgb(94,94,94)"></u-icon>
										<!-- <view class="store">{{ res.store }}</view> -->
										<view class="store">{{res.code}}</view>
										<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
									</view>
									<view class="right">{{ status(res.orderStatus) }}</view>
								</view>
								<view style="margin-top: 10px;display: flex;justify-content: space-between;">
									<view >客户:{{ res.basCus.name }}</view>
									<view></view>
								</view>
								<view style="display: flex;justify-content: space-between;">
									<view></view>
									<view style="color: #e5d001;">下单时间：{{ res.ddate }}</view>
								</view>
								
								<view  v-for="(item, index) in res.rdsList" :key="index">
									<view class="item">
										<!-- v-if="item.busType == '0'" -->
										<view class="left"><image :src="item.basInv.picUrl?vuex_config.baseUrl + item.basInv.picUrl:''" mode="aspectFit"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.basInv.cinvname }}</view>
											<view class="type">规格：{{item.basInv.cinvstd?item.basInv.cinvstd:''}}</view>
											
											<!-- <view class="delivery-time">下单时间：{{ res.ddate }}</view> -->
										</view>
										<view class="right">
											<view class="price">￥{{item.itaxunitprice?item.itaxunitprice:'暂无单价'}}</view>
											<view class="number">x{{ item.inum }}</view>
											<view v-if="item.bgift == '1'" style="display: flex;justify-content: center;align-items: center;">
												<image style="width: 30px;height: 30px;" src="/static/image/zeng.png" mode="aspectFit"></image>
											</view>
										</view>
									</view>
								</view>
								<view >
									<view style="display: flex;justify-content: space-between;">
										<view style="display: flex;">
											<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/zh.png"></image>
											<text >使用账户金额:</text>
										</view>
										 <text >￥{{res.chdefine46?res.chdefine46:'0.00'}}</text>
									</view>
									<view style="display: flex;justify-content: space-between;margin: 5px 0;">
										<view style="display: flex;">
											<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/fl.png"></image>
											<text >使用返利金额:</text>
										</view>
										 <text >￥{{res.headVO.cdefine7?res.headVO.cdefine7:'0.00'}}</text>
									</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="display: flex;">
											<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/cx.png"></image>
											<text >使用促销金额:</text>
										</view>
										 <text >￥{{res.headVO.cdefine16?res.headVO.cdefine16:'0.00'}}</text>
									</view>
									
								</view>
								<view class="total">
									<!-- {{ totalNum(res.goodsList) }} -->
									共{{ totalNum(res.rdsList) }}件商品 合计:
									<text class="total-price">
										<!-- {{ priceInt(totalPrice(res.goodsList)) }} -->
										￥{{ res.totalMoney?res.totalMoney:'0.00'}}
										<!-- <text class="decimal">00</text> -->
										<!-- {{ priceDecimal(totalPrice(res.goodsList)) }} -->
									</text>
								</view>
								<!-- border-radius: 10px;padding: 5px 10px;border: 1px solid #aaa; -->
								<view v-if="res.orderStatus == 0" style="margin-top: 10px;">
									<!-- color="#2979ff size="28"" -->
									<!-- <u-icon name="close-circle"  ></u-icon> -->
									<text style="font-weight: bold;"> 作废原因：</text>
									<text style="color: red;">{{ res.cancelReason?res.cancelReason:''}}</text>
									
								</view>
								<view class="bottom">
									<view class="more">
										<!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
										</view>
									<!-- <view v-if="res.orderStatus != 1" class="exchange btn" @click="delivery(res)">查看物流</view> -->
									<view style="display: flex;">
										<view v-if="res.orderStatus == 2 || res.orderStatus == 3" class="exchange btn" @click.stop="delivery(res)">查看物流</view>
										<view v-if="res.orderStatus == 2" style="margin-left:10px;" @click.stop="confirm(res)" class="evaluate btn">确认收货</view> 
										<view v-if="res.orderStatus == 2" style="margin-left:10px;border: 1px solid red;color: red;" @click.stop="delay(res)" class="btn">延长收货</view> 
										<view v-if="res.orderStatus == 4" style="margin-left:10px;border: 1px solid red;color: red;" @click.stop="cancel(res)" class="btn" >取消订单</view> 
									</view>
									<!-- <view class="exchange btn">确认收货</view>
									<view v-if="res.orderStatus == 2" class="evaluate btn">确认收货</view> -->
								</view>
							</view>
							<view class="page-box" v-if="!dataList.length">
								<view>
									<view class="centre">
										<image style="margin: auto;" src="/static/image/taobao-order.png" mode=""></image>
										<view class="explain">
											您还没有相关的订单
											<view class="tips">可以去看看有哪些想买的</view>
										</view>
										<!-- <view class="btn">随便逛逛</view> -->
									</view>
								</view>
							</view>
							<u-loadmore v-if="dataList.length" :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>
		<!-- title="确定收货" -->
		<u-modal v-model="shopShow" title="确定后订单完结,是否确定收货？"  :mask-close-able="true" :show-cancel-button="true" 
			@confirm="confirmok">
			
			<view style="padding: 10px;">
				<!-- <textarea style="background-color: #f7f7f7;padding: 10px;" v-model="shopokData.receiveRemarks" type="text"  placeholder="请输入收货备注信息" /> -->
			</view>
		</u-modal>
		<!-- 取消订单 -->
		<u-modal v-model="cShow" title="是否确定取消该订单？"  :mask-close-able="true" :show-cancel-button="true"
			@confirm="cancelok">
			
			<view style="padding: 10px;">
				<!-- <textarea style="background-color: #f7f7f7;padding: 10px;" v-model="shopokData.receiveRemarks" type="text"  placeholder="请输入收货备注信息" /> -->
			</view>
		</u-modal>
		<!-- 延长收货 -->
		<u-modal v-model="delayShow" title="延长收货"  :mask-close-able="true" :show-cancel-button="true"
			@confirm="delayok">
			
			<view style="padding: 10px;">
				<u-input v-model="value" type="number" placeholder="请输入延长天数" :focus="focus" :border="true"
					clearable/>
				<view style="color: red;margin-top: 10px;font-size: 24rpx;">
					注：延长天数不能小于1天且不能超过7天！
				</view>
			</view>
			
		</u-modal>
	</view>
</template>

<script>
// import Logistics from '/components/logistics/logistics.vue';
import util from '@/common/fire.js'
export default {
	data() {
		return {
			shopokData:{},
			cShow:false,
			shopShow:false,
			delayShow:false,
			triggered:false,
			value:'',
			focus: true,
			orderData:{},
			orderList: [[], [], [], [], []],
			dataList: [],
			list: [
				{
					name: '全部'
				},
				{
					name: '待审核'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '已完成',
					// count: 12
				},
				{
					name: '已作废',
				},
				
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			query: {
				pageNo: 1,
				pageSize: 5
			},
			loadStatus: 'loadmore',
		};
	},
	onLoad(params) {
		this.current = params.id;
		this.swiperCurrent = params.id;
		
		if(this.current == 0){
			this.query.orderStatus=''
		}
		if(this.current == 1){
			this.query.orderStatus='4'
		}
		if(this.current == 2){
			this.query.orderStatus='3'
		}
		if(this.current == 3){
			this.query.orderStatus='2'
		}
		if(this.current == 4){
			this.query.orderStatus='1'
		}
		if(this.current == 5){
			this.query.orderStatus='0'
		}
		this.loadList()
		this.orderData = params.orderData
		console.log(params)
	},

	computed: {
		// 价格小数
		// priceDecimal() {
		// 	return val => {
		// 		if (val !== parseInt(val)) return val.slice(-2);
		// 		else return '00';
		// 	};
		// },
		// // 价格整数
		// priceInt() {
		// 	return val => {
		// 		if (val !== parseInt(val)) return val.split('.')[0];
		// 		else return val;
		// 	};
		// }
	},
	methods: {
		jumpListDetails(item){
			uni.navigateTo({
				url: '/pages/btdm/index/user/orderListDetails',
				success: function(res) {
					// 通过eventChannel向被打开页面传送数据
					// 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
					res.eventChannel.emit('acceptDataFromOpenerPage', item)
				}
			})
			console.log(item,'-------');
		},
		async refresherrefresh(){
			console.log(22222);
			this.triggered = true
				this.query.pageNo = 1;
				await this.loadList()
				this.triggered = false
		},
		status(i){
			let status = ''
			if(i == 0){
				status='已作废'
			}
			if(i == 1){
				status='已完成'
			}
			if(i == 2){
				status='待收货'
			}
			if(i == 3){
				status='待发货'
			}
			if(i == 4){
				status='待审核'
			}
			return status
		},
		loadList(type) {
			this.query.cusCode=this.vuex_basCus.code
			// this.query.createBy=this.vuex_user.userCode
			this.$u.api.shop.orderListData(this.query).then(res => {
				
				if(res.result == 'false'){
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
				}else{
					if (res.list.length < 20 || res.list.length == 0){
						this.loadStatus = "nomore";
					}
					var list = res.list.map(item =>{
						item.chdefine46 = util.toFixed2(item.chdefine46)
						item.headVO.cdefine7 = util.toFixed2(item.headVO.cdefine7)
						item.headVO.cdefine16 = util.toFixed2(item.headVO.cdefine16)
						item.totalMoney = util.toFixed2(item.totalMoney)
						return item;
					});
					if(type=="add"){
						for(var i=0;i<list.length;i++){
							this.dataList.push(list[i])
						}
					}else{
						this.dataList=list;	
					}
					
				}
				console.log(this.dataList,'this.dataList====');
			})
			// this.$u.api.shop.orderListData()
			// 	.then(res => {
			// 		console.log(res, '=========');
			// 	});
			
		},
		reachBottom() {
			// 此tab为空数据
			this.loadStatus = "loading";
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList("add");
			}, 100);
		},
		// 总价
		totalPrice(item) {
			let price = 0;
			item.map(val => {
				price += parseFloat(val.price);
			});
			return price.toFixed(2);
		},
		// 总件数
		totalNum(item) {
			let num = 0;
			item.map(val => {
				num += val.inum;
			});
			return num;
		},
		// tab栏切换
		change(index) {
			this.current = index
			this.swiperCurrent = index;
			// console.log(index,'index====');
			// this.query.orderStatus=index
			// this.loadList()
		},
		// transition({ detail: { dx } }) {
		// 	this.$refs.tabs.setDx(dx);
		// },
		animationfinish({ detail: { current } }) {
			uni.showLoading({
			           title: '加载中',
			           mask: true
			         });
			// this.dataList= [];
			// this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			console.log(current,'current====');
			if(current == 0){
				this.query.orderStatus=''
			}
			if(current == 1){
				this.query.orderStatus='4'
			}
			if(current == 2){
				this.query.orderStatus='3'
			}
			if(current == 3){
				this.query.orderStatus='2'
			}
			if(current == 4){
				this.query.orderStatus='1'
			}
			if(current == 5){
				this.query.orderStatus='0'
			}
			this.query.pageNo = 1;
			this.loadList()
		},
		delay(item){
			let _this = this
			this.focus= false
			this.value = ''
			this.delayShow = true
			this.shopokData.code = item.code
			setTimeout(() => {
				_this.focus = true;
			}, 500)
		},
		confirm(item){
			this.shopShow = true
			this.shopokData.code = item.code
		},
		cancel(item){
			this.cShow = true
			this.shopokData.code = item.code
		},
		delayok(){
			if(this.value>7){
				this.$u.toast('延长时间不能超过7天');
			}else if(this.value<1){
				this.$u.toast('延长时间不能小于1天');
			}else{
				console.log(this.shopokData);
				console.log(this.value);
				this.$u.api.shop.delay({
					code:this.shopokData.code,
					delayDay:this.value
				})
					.then(res => {
						if(res.result == 'true'){
							this.query.pageNo = 1;
							setTimeout(()=>{
								this.$u.toast(res.message);
							},500)
							this.loadList()
						}else{
							setTimeout(()=>{
								this.$u.toast(res.message);
							},500)
						}
					});
			}
		},
		cancelok(){
			this.$u.api.shop.delete(this.shopokData)
				.then(res => {
					if(res.result == 'true'){
						this.query.pageNo = 1;
						setTimeout(()=>{
							this.$u.toast(res.message);
						},500)
						this.loadList()
					}else{
						setTimeout(()=>{
							this.$u.toast(res.message);
						},500)
					}
					
					console.log(res, '=========');
				});
		},
		confirmok(){
			this.$u.api.shop.confirm(this.shopokData)
				.then(res => {
					if(res.result == 'true'){
						this.query.pageNo = 1;
						setTimeout(()=>{
							this.$u.toast(res.message);
						},500)
						this.loadList()
					}else{
						setTimeout(()=>{
							this.$u.toast(res.message);
						},500)
					}
					
					console.log(res, '=========');
				});
		},
		delivery(res){
			uni.navigateTo({				
				url: '/pages/btdm/index/user/delivery?orderCode=' + res.code,
				// url: '/pages/btdm/index/user/logistics',
			})
			// console.log(1111111111111)
		}
	} 
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			width: 100%;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
